<template>
	<div
		class="list-wrapper"
	>
		<div
			v-for="(item, index) in list"
			:key="index"
		>
			<u-cell
				:border="false"
				clickable
				style="border-radius:12rpx ;"
				@click="onClickItem(item)"
			>
				<div slot="label" >
					<!-- 图片 -->
					<u-image radius="12rpx 12rpx 0 0" :src="item.poster" height="300rpx" width="100%">
						
					</u-image>
					<div class="flex flex-center" style="background-color: #FFFFFF;border-radius: 0 0 12rpx 12rpx;padding: 12rpx;justify-content: space-between;">
						<div style="color: red;">
							<text >￥</text><text style="font-size: 48rpx;">{{item.refPrice || '暂无'}}</text>
							<text style="font-size: 26rpx;color: #999999;">参考价格</text>
						</div>
						<div class="flex flex-center">
							<u-avatar size="30" :src="item.shopImg"></u-avatar>
							<text style="margin-left: 6rpx;font-size: 24rpx;">{{item.shopName}}</text>
						</div>
					</div>
				</div>
			</u-cell>
		</div>
		
		<u-loadmore :status="loadStatus" />
	</div>
</template>

<script>
	export default {
		props: {
			
		},
		data() {
			return {
				pageSet: {
					page: 1,
					pageSize: 20
				},
				// loadmore  loading / nomore
				loadStatus: 'loadmore',
				// 分页列表数据
				pageData: {},
			}
		},
		computed: {
			// 转换后列表
			list(){
				let {pageData} = this;
				if (pageData) {
					let list = [];
					console.log("pageData", pageData);
					for (let key in pageData) {
						console.log("key-", key);
						console.log("pageData", pageData);
						list.push(...pageData[key]);
					}
					return list;
				}
				return [];
			},
		},
		mounted() {
			this.onRefresh();
		},
		methods: {
			// 刷新
			onRefresh(){
				this.pageData = {};
				this.queryList(1, this.pageSet.pageSize);
			},
			// 查询列表
			queryList(page, pageSize){
				let form = {
					page: page,
					pageSize: pageSize,
				};
				this.loadStatus = 'loading';
				this.$api.app.hairdoExample.query(form).then(({data})=>{
					uni.stopPullDownRefresh();
					this.pageSet.page = page;
					
					let records = data.records;
					if (records && records.length > 0) {
						this.$set(this.pageData, page + "", records);
						
						this.loadStatus = data.total >= this.pageSet.pageSize ? 'loadmore' : 'nomore';
					} else {
						this.loadStatus = 'nomore';
					}
				}).catch(e=>{
					uni.stopPullDownRefresh();
					this.loadStatus = 'nomore';
				});
			},
			// 点击一项
			onClickItem(item){
				console.log("点击案例", item);
				let url = item.videoUrl;
				if (url) {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + url
					})
				}
			},
			// 滚动到底部
			scrolltolower(){
				// console.log('滚动到底部');
			},
			// 加载更多
			onLoadMore(){
				// console.log("加载更多");
			}
		}
	}
</script>

<style scoped>
	.list-wrapper{
		padding-bottom: 48rpx;
	}
</style>
